<template>
  <li style="position:relative">
    <a @mousedown.prevent="handleClick" style="cursor:pointer">
      <span v-el:v><slot></slot></span>
      <span class="glyphicon glyphicon-ok check-mark" v-show="chosen"></span>
    </a>
  </li>
</template>

<script>
  export default {
    props: {
      value: {
        type: String
      }
    },
    data() {
      return {
        chosen: false
      }
    },
    computed: {
      chosen() {
        return this.$parent.value.indexOf(this.value) !== -1
      }
    },
    methods: {
      handleClick() {
        const parent = this.$parent
        if (parent.multiple) {
          const index = parent.value.indexOf(this.value)
          index === -1 ? parent.value.push(this.value) : parent.value.splice(index, 1)
        } else {
          parent.value = [this.value]
          parent.show = false
        }
      }
    }
  }
</script>

<style scoped>
  a span.check-mark {
    position: absolute;
    display: inline-block;
    right: 15px;
    margin-top: 5px;
  }
</style>
